<template>
  <div class="movieDetail">
    <detailHeader v-if="detail" :detail="detail" :styleObj="styleObj"></detailHeader>
    <div class="movieDesc">
      <p  :class="contentHeight">{{detail.content}}</p>
      <i class="iconfont icon-icon--" :class="contentHeight?'icon-icon--':'icon-shang'" @click="showAll"></i>
    </div>
  </div>
</template>

<script>
import detailHeader from "./components/detailHead.vue";
export default {
  name: "mvoieDetail",
  components: {
    detailHeader
  },
  data() {
    return {
      detail: "",
      styleObj: {
        backgroundImage: ""
      },
      contentHeight:'contentHeight'
     
    };
  },
  created() {
    this.$http
      .get("/api/movieDetail", {
        params: {
          id: this.$route.params.id
        }
      })
      .then(res => {
        console.log(res);
        this.detail = res.data.data;
        this.styleObj.backgroundImage = `url(${this.detail.image})`;
      });
  },
  methods: {
    showAll() {
     if(this.contentHeight == ""){
       this.contentHeight = 'contentHeight';
     }else{
       this.contentHeight = "";
     }
    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.movieDetail {
  .movieDesc {
    font-size: vw(16);
    color: #999;
    margin: vw(20);
    text-align: center;
    p {
      text-align: left;
    }
    .contentHeight {
      height: vw(45);
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: vw(10);
    }
    i {
      font-size: vw(20);
      color: #999;
    }
  }
}
</style>